<!--
 * @Author: lbt666 '1319451895@qq.com'
 * @Date: 2022-07-25 15:00:51
 * @LastEditors: lbt666 lbt666@@
 * @LastEditTime: 2023-05-04 18:19:01
 * @Description: tabbar
-->
<template>
  <van-tabbar class="tabbar" route placeholder active-color="#49B2E7" inactive-color="#767676" fixed
    safe-area-inset-bottom z-index="6">
    <van-tabbar-item icon="home-o" replace to="/">首页
      <template #icon="props">
        <img class="tabbarIcon" :src="props.active ? getImageUrl('shouyeA') : getImageUrl('shouye')" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="search" replace to="/property">资产
      <template #icon="props">
        <img class="tabbarIcon" :src="props.active ? getImageUrl('zichanA') : getImageUrl('zichan')" />
      </template>
    </van-tabbar-item>
    <!--<van-tabbar-item icon="search" to="/blindBox">盲盒
      <template #icon="props">
        <img class="tabbarIcon" :src="props.active ? getImageUrl('mangheA') : getImageUrl('manghe')" />
      </template>
    </van-tabbar-item>-->
    <van-tabbar-item icon="search" to="/my">我的
      <template #icon="props">
        <img class="tabbarIcon" :src="props.active ? getImageUrl('wodeA') : getImageUrl('wode')" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts" setup>
const getImageUrl = (name: string) => {
  return new URL(`../../assets/${name}.png`, import.meta.url).href
}
</script>
<style scoped lang="less">
.tabbar :deep(.van-tabbar-item__icon) {
  height: 20px;
}

.tabbarIcon {
  width: 20px;
  height: 20px;
}
</style>